<script setup lang="ts">
import { ref } from 'vue';

const selectedColumn = ref('');
const columns = [
    { prop: 'XF1', label: 'XF1' },
    { prop: 'XF2', label: 'XF2' },
    { prop: 'XF3', label: 'XF3' },
    { prop: 'XF4', label: 'XF4' },
    { prop: 'XF5', label: 'XF5' },
]
const tableData = ref([
{
        id: 1,
        origin: '产地A',
        station: '工位A',
        description: '描述A',
        address: '寻址A',
        groundDevice: '装置A',
        forcePosition: '位置A',
        groundPosition: '接地A',
        forceRisePosition: '上升A',
        blackRockPull: '是',
        highestPoint: '高点A',
        blackRockActive: '生效'
      },
])

</script>

<template>
  <div>
  
  <div class="select">
    <div style="text-align: center;" ><el-text style="font-size: 30px;" type="primary"><b>信息查询</b></el-text></div>
    <el-text style="margin-left: 70px;" size="large" type="primary"><b>选择产线:</b></el-text>
    <el-select
      v-model="selectedColumn"
      placeholder="选择产线"
      size="large"
      style="width: 150px; margin-left: 30px;"
    >
        <el-option
          v-for="column in columns"
          :key="column.prop"
          :label="column.label"
          :value="column.prop"
        />
    </el-select>

    
  </div>
  <div class="info">
    <el-table :data="tableData">
      <el-table-column prop="id" label="ID" width="100" align="center" />
      <el-table-column prop="origin" label="产地名称" width="150" align="center" />
      <el-table-column prop="station" label="工位名称" width="150" align="center" />
      <el-table-column prop="description" label="工位描述" width="200" align="center" />
      <el-table-column prop="address" label="寻址系" width="150" align="center" />
      <el-table-column prop="groundDevice" label="压裂接地装置" width="150" align="center" />
      <el-table-column prop="forcePosition" label="压裂受力开位置" width="150" align="center" />
      <el-table-column prop="groundPosition" label="压裂接地位置" width="150" align="center" />
      <el-table-column prop="forceRisePosition" label="压裂受力上升位置" width="150" align="center" />
      <el-table-column prop="blackRockPull" label="黑岩拉动强" width="120" align="center" />
      <el-table-column prop="highestPoint" label="最高点" width="100" align="center" />
      <el-table-column prop="blackRockActive" label="黑岩生效" width="100" align="center" />
    
    </el-table>
    </div>
  </div>
  
</template>

<style scoped>
.select{
  width: 1335px;
  height: 150px;
  background-color: aliceblue;
  margin: -20px;
}
.info{
  display: flex;
  width: 1335px;
  height: 600px;
  background-color: aqua;
  margin-top: 23px;
  margin-left: -20px;
}
</style>